<template>
    <div class="minishop-discover-detail ">
        <div class="custom-header1">
        <div class=" headNav"
            :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
            @click="back">
            <section class="headArea" :style="{ height: headAreaHeight + 'px', marginTop: headAreaMarTop + 'px' }">
                <div class='leftBox' :style="{width: 'calc( 100% )'}">
                    <div class="inner">
                        <img class="back-img" src="/static/images/back.png" alt="">
                    </div>
                </div>
            </section>
        </div>
        </div>

        <template v-if="tip">
            <div class="swiper-bar">
                <swiper class="swiper" :indicator-dots="indicatorDots"
                    :autoplay="autoplay" :interval="interval" :duration="duration">
                    <block v-for="(item, i) in tip.images" :key="i">
                        <swiper-item >
                            <img  :src="item" alt="">
                        </swiper-item>
                    </block>
                </swiper>
            </div>
            <div class="plr17">
                <div class="kitbox pt10">
                    <div class="flex1">
                        <img class="v-middle avatar" :src="tip.avatar" alt="">
                        <span class="v-middle ml6 c-5c5c5c fs-13">{{tip.nickname}}</span>
                    </div>
                    <div class="pt5 share-wrap">
                        <button data-name="shareBtn" class="shareBtn" open-type="share">转发</button>
                        <img class="share" src="/static/images/share-h.png" alt="">
                    </div>
                </div>
                <div class="c-000 fs-15 f-bold pt10">{{tip.title}}</div>
                <div class="pt15" v-if="tip.tags&&tip.tags.length">
                    <van-tag class="mr5" v-for="(item, i) in tip.tags" :key="i" color="#707070">{{item}}</van-tag>
                </div>
                <div  class="content c-000 fs-14 pt22 pb20">
                    <div v-html="tip.detail"></div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import tipApi from "@/api/api-tip";

import moment from '@/plugins/utils/moment.js'
export default {
    data () {
        var sysInfo = wx.getSystemInfoSync()
        return {
            id: "",
            tip: undefined,
            indicatorDots: true,
            vertical: false,
            autoplay: true,
            interval: 3000,
            duration: 500,

            pixelRatio: sysInfo.pixelRatio, //系统像素比
            statusBarHeight: sysInfo.statusBarHeight, //系统状态栏高度
            navHeight: "", //顶部导航栏高度
            headAreaHeight: sysInfo.pixelRatio * 35 / sysInfo.pixelRatio, //顶部内容区域高度
            headAreaMarTop: "", //顶部内容区域外边距
            headleftBoxW: "", //顶部内容左侧区域外边距
            headRightBoxW: "", //顶部内容右侧区域外边距
            containersHeight: "", //页面内容区域高度
        }
    },
    watch: {
        '$store.getters.logined': {
            handler(n, o){
                if(n){
                    
                }
            }
        },
    },
    components: {
        
    },
    onLoad(options){
        this.id = options.id
    },
    mounted () {
        var sysInfo = wx.getSystemInfoSync()
        //IOS 与 安卓进行差异化处理
        if (sysInfo.system.substring(0, 3) == "iOS") {
            this.navHeight = this.pixelRatio * 40 / this.pixelRatio;
            this.headAreaMarTop = this.pixelRatio * 0.5 / this.pixelRatio;
            this.headleftBoxW = sysInfo.windowWidth - this.pixelRatio * 100 / this.pixelRatio;
            this.headRightBoxW = this.pixelRatio * 100 / this.pixelRatio;
            this.containersHeight = sysInfo.windowHeight - (this.statusBarHeight + this.pixelRatio * 40 / this.pixelRatio);
        } else {
            this.navHeight = this.pixelRatio * 45 / this.pixelRatio;
            this.headAreaMarTop = this.pixelRatio * 2.5 / this.pixelRatio;
            this.headleftBoxW =  sysInfo.windowWidth - this.pixelRatio * 110 / this.pixelRatio;
            this.headRightBoxW = this.pixelRatio * 110 / this.pixelRatio;
            this.containersHeight = sysInfo.windowHeight -  (this.statusBarHeight + this.pixelRatio * 45 / this.pixelRatio);
        }
        this.initPage()
    },
    onShow(){
        
    },
    methods: {
        initPage(){
            this.GetTip()
        },
        GetTip(){
            tipApi.GetTip({
                tipId: this.id
            }).then(data => {
                var arr = data.result.detail.split("\<img")
                arr.forEach((v, i)=>{
                    if(v.indexOf('src')!=-1){
                        if(v.indexOf('style')!=-1 && v.indexOf('style')< v.indexOf('>')){
                            arr[i] = v.replace('style="', 'style="max-width:100%;height:auto;').replace("style='", "style='max-width:100%;height:auto;")
                        } else {
                            arr[i] = 'style="max-width:100%;height:auto" ' +arr[i]
                        }
                    }
                })
                data.result.detail = '<div class="p-detail-panel-body">'+ arr.join('<img ') + '</div>'
                data.result.tags = (data.result.tag&&data.result.tag.split(' ')) || []
                this.tip = data.result
            })
        },
        back(){
            wx.navigateBack({})
        },
        getSysInfo() {
            const res = wx.getSystemInfoSync()
            return res
        },
    },
    onShareAppMessage( options ){
        var that = this;
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
            title: this.tip.title,// 默认是小程序的名称(可以写slogan等)
            path: '',// 默认是当前页面，必须是以‘/’开头的完整路径
            imageUrl: "",//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
            success: function(res){
                // 转发成功之后的回调
                if(res.errMsg == 'shareAppMessage:ok'){
                    wx.showToast({
                        title: "分享成功",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            fail: function() {
                // 转发失败之后的回调
                if(res.errMsg == 'shareAppMessage:fail cancel'){
                    // 用户取消转发
                
                }else if(res.errMsg == 'shareAppMessage:fail'){
                    // 转发失败，其中 detail message 为详细失败信息
                    wx.showToast({
                        title: "分享失败",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            complete: function () {
                
            }
        };
        // 来自页面内的按钮的转发
        if( options.from == 'button' ){
            　
        }
        // 返回shareObj
        return shareObj;
    },
}
</script>

<style  lang="scss">
.p-detail-panel-body{
    div{
        max-width: 100%;
    }
}
@import './scss/jdfxxq.scss';
</style>
